//变量
@link-color: #428bca; //基础用法
@link-color-hover: darken(@link-color, 10%); //颜色加深函数
.variables{
    background: @link-color;
    &:hover{
        background: @link-color-hover;
    }
}
//------
@mySelector: banner; //变量插值 @{} 还能插在路径的字符串中'@{images}/white-sand.png'
.@{mySelector} {
  font-weight: bold;
}
//------
@myPath: '../css'; //导入语句
@import '@{myPath}/common.less';
//------
@property: font; //属性变量
.@{mySelector} {
  @{property}-size: 14px;
}
//------
@fnord: italic; //使用变量来定义变量名
@var: fnord;
.variables{
    font-style: @@var; //@var 等于 fnord 所以 @@var 就等于 @fnord
}
//------
.variables{ //先变量提升 然后在当前作用域中向上搜索
    box-shadow: 3px 3px 3px @up;
    @up: red;
}
@up: #ccc;



//扩展
.extend{
    &:extend(.inline); //会解析成 .inline, .extend {color: red;} 就是把.inline 的样式加载 .extend 上 可理解为“继承”
}
.inline{
    color: rgb(105, 178, 221);
}
//------
.inline1{
    color: yellow; //这里不会扩展
    tr {
        background: #ca4242; //扩展
    }
}
.extend:extend(.inline1 tr){ //嵌套选择器
    display: block;
}
//------
@variable3: .inline3;
@{variable3} {// 插值选择器
  box-shadow: 3px 3px 3px purple;
}
.extend:extend(.inline3) {//可用 在扩展表达式中不能使用变量
    display: block;
}
//------
.bucket {
  box-shadow: 3px 3px 3px pink;
}
@{variable1}:extend(.bucket) {// 找不到匹配
    display: block;
}
@variable1: .extend;
//------
.inline2 { 
  box-shadow: 3px 3px 3px blue;
}
.extend:extend(@{variable2}) {// 插值选择器什么也不匹配
    display: block;
}
@variable2: .inline2;



//混合
.a{
    color: white;
}
.mixins{
    .a; //.a()括号可以省略
}
//------
.b{
    background: #cac142;
}
.c(){ //加上括号 该样式集合就不会生成样式 相当于 定义了一个函数集合当作变量使用
    text-shadow: 3px 3px 3px #428bca;
}
.mixins{
    .b;
    .c;
}
//------
.d(){
    box-shadow: 3px 3px 3px pink;
    border-color: aqua;
}
.mixins{
    .d !important; //可以为 .d 中的所有属性加上 !important 关键字
}



//带参数的混合
.border-color(@color){
    border-color: @color;
}
.box-shodow(@color: #42ca8b){ //给参数默认值
    box-shadow: 3px 3px 3px @color;
}
.params-mixins{
    .border-color(#ca4742);
    .box-shodow;
}
//------
.more-params(@color){
    color: @color;
}
.more-params(@color; @size: 14px) { //@size 有默认值所以可以应用这个属性
    font-size: @size;
}
.more-params(@color; @size; @weight: bold){ // @size 没有值 该属性无法应用 是无效的
    font-weight: @weight;
}
.params-mixins{
    .more-params(white);
    .more-params(white, 14px); //模式匹配
}
//------
.text-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { //@arguments 在mixins内部 表示所以参数 用空格隔开
    text-shadow: @arguments;
}
.params-mixins {
  .text-shadow(3px, 3px);
}
//------
.background(dark; @color) { //模式匹配
    background: darken(@color, 10%);
}
.background(light; @color) {
    background: lighten(@color, 10%);
}
.background(@_; @color) { //@_ 表示接受任何值
    display: block;
}
@switch: dark;
.params-mixins {
  .background(@switch; purple);
}


//作为函数使用的混合
.func1{
    @color: pink; //返回值
}
.func-mixins{
    .func1;
    color: @color;
}
//-----
.func2(@color){
    .func3{ //返回一个mixins
        background: @color;
    }
}
.func-mixins{
    .func2(#c28fdf);
    .func3;
}


//传递规则集给混合
@detached-ruleset: { //这个就是规则集
    background: rgb(187, 255, 0);
};
.rulesets-mixins{
    @detached-ruleset(); //这里的括号不能省略
}
//------
@detached-ruleset1: { //规则集可以所有它的mixins，但是不能返回变量！
    .mixin-to-ruleset() {
        color:blue;
    }
    @color: red; //无法返回 私有变量
};
.rulesets-mixins{
    @detached-ruleset1(); //返回了mixins
    .mixin-to-ruleset;
    // color: @color; 报错
}
//------
#space {
    .importer1() {
        @detached: { font-weight: @variable; }; // 定义分离规则集合
    }
}
.importer2() {
    @variable: bold; // 导入分离规则集合能使用这个变量
    #space > .importer1(); // ！！导入分离规则集合 注意这种导入的方式
}
.rulesets-mixins {
    .importer2(); // 第二次解锁/导入分离规则集合
    @detached();
}


//导入准则
//导入选项

//Mixin Guards 带条件的 Mixin
.condition (@a) when (lightness(@a) >= 50%) {
  background: black;
}
.condition (@a) when (lightness(@a) < 50%) {
  background: white;
}
.condition (@a) {
  color: @a;
}
.condition-mixins{
    .condition(#555)
}
//------
.condition1 (@a) when (@a > 0) {
    color: #8fdf93;
}
.condition1 (@a) when (default()) { //类似条件语句
  color: #c28fdf;
}
.condition-mixins {
  .condition1(-1)
}
//------
@my-option: true;
.condition-mixins when (@my-option = true) { //直接在样式上编写约束 无须借助混合
  box-shadow: 3px 3px 3px #42caca;
}


//循环
.generate-columns(@n, @i: 1) when (@i =< @n) {
    @px: 1px;
    @c: @i*20;
    @color: hsl(@c, 70%, 50%);
    box-shadow+: @px*@i*1.5 @px*@i*1.5 @px*@i*1.5 @color;
    .generate-columns(@n, (@i + 1));
}
.loop-mixins{
    .generate-columns(4);
    background: rgb(254, 255, 195);
}


//Merge 合并 上述例子即为合并
//box-shadow+: @px*@i*1.5 @px*@i*1.5 @px*@i*1.5 @color+@i*30;


//Parent Selectors 父级选择器
// p, a, ul, li {
//   border-top: 2px dotted #366;
//   & + & {
//     border-top: 0;
//   }
// }
// 生成一个用逗号分割的所有可能的选择器排列
// p,
// a,
// ul,
// li {
//   border-top: 2px dotted #366;
// }
// p + p,
// p + a,
// p + ul,
// p + li,
// a + p,
// a + a,
// a + ul,
// a + li,
// ul + p,
// ul + a,
// ul + ul,
// ul + li,
// li + p,
// li + a,
// li + ul,
// li + li {
//   border-top: 0;
// }